<template>
	<gui-page :fullPage="true" :isLoading="false" ref="guiPage" :isSwitchPage="true">
		<view slot="gBody" class="gui-flex1 gui-flex gui-columns" style="background-color:#fff;">
			<!-- 分类导航 -->
			<view id="myheader">
				<view class="headerTap gui-border-box flex-ac-jb">
					<gui-switch-navigation :size="130" :margin="20" :currentIndex="currentIndex" fontSize="32rpx"
						activeFontSize="32rpx" activeLineBg="linear-gradient(to right, #FF4600,#FF4600)"
						activeColor="#FF4600" textAlign="center" activeLineWidth="60rpx" activeDirection="center"
						activeLineRadius="10rpx" :items="tabs" @change="navchange"></gui-switch-navigation>
					<view class="saveBtn shaixuan">筛选</view>
				</view>
				<view class="search">
					<picker @change="bindPickerChange" :value="dormitoryIndex" :disabled="dormitoryList.length<=1"
						:range="dormitoryList" range-key="name">
						<view class="item flex-ac">
							<text class="label">筛选：</text>
							<view class="flex1" style="padding-left: 8rpx;">
								<input type="text" v-model="dormitoryName" style="pointer-events: none;" disabled placeholder="请选择宿舍楼名称" placeholder-class="plStyle" />
							</view>
						</view>
					</picker>
					<picker @change="bindPickerChange3" :value="floorIndex" :disabled="floorList.length<=1"
						:range="floorList" range-key="name">
						<view class="item flex-ac">
							<text class="label">筛选：</text>
							<view class="flex1" style="padding-left: 8rpx;">
								<input type="text" v-model="floorName" style="pointer-events: none;" disabled placeholder="请选择楼层" placeholder-class="plStyle" />
							</view>
						</view>
					</picker>

					<view class="item flex-ac">
						<text class="label">搜索：</text>
						<view class="flex1">
							<gui-search :isSearchIcon="false" @clear="handleClear" @inputting="inputting" @confirm="handleSearch" placeholder="按订单号/手机号后四位进行搜索"
								placeholder-class="plStyle" background="transparent" ></gui-search>
						</view>
					</view>
				</view>
			</view>
			<swiper :current="currentIndex" @change="swiperChange" :style="{height:mainHeight+'px', width:'750rpx'}">
				<!-- 轮播项目数量对应 上面的选项标签 -->
				<swiper-item v-for="(items, orderIndex) in orders" :key="orderIndex">
					<!-- 使用滚动区域来实现主体内容区域 -->
					<scroll-view :scroll-y="true" :scroll-top="scrollTops[currentIndex]"
						:style="{height:mainHeight+'px'}" @touchstart="touchstart" @touchmove="touchmove"
						@touchend="touchend" @scrolltolower="loadmorefun" @scroll="scroll">
						<!-- 刷新组件 -->
						<gui-refresh @reload="reload" ref="refreshcom"></gui-refresh>
						<gui-empty v-if="noData[currentIndex]">
							<view slot="img" class="gui-flex gui-rows gui-justify-content-center">
								<!-- 请根据您的项目要求制作并更换为空图片 -->
								<image class="gui-empty-img" src="../../static/noImg.png" mode="widthFix"></image>
							</view>
							<text slot="text" class="gui-text-small gui-block-text gui-text-center gui-margin-top"
								style="color:#9DABFF;">暂无数据</text>
						</gui-empty>
						<!-- 数据展示区域 -->
						<view class="order">
							<view class="item" v-for="(item,oIndex) in orders[orderIndex]">
								<view class="top">
									<view class="title">
										订单编号：{{item.orderNo}}
									</view>
									<text class="statusText">{{getStatus(item.orderStatus)}}</text>
								</view>
								<view class="info">
									<view class="mainImg">
										<image :src="item.reserveOrderItem.shoeImg||'../../static/logo.png'"
											mode="aspectFill"></image>
										<!-- <view class="statusBox">{{item.label}}</view> -->
									</view>
									<view class="middle">
										<text class="title">{{item.reserveOrderItem.title}}</text>
										<text class="desc"
											style="color: #333;font-size: 26rpx;margin-top: 10rpx;">预约时间：{{item.doorTime}}</text>
									</view>
								</view>
								<view class="address">
									<view class="flex-ac">
										<text>{{item.receiverName}}</text>
										<text @tap="goPhone(item.receiverPhone)"
											style="margin: 0 10rpx 0 20rpx;">{{$u.hidePhone(item.receiverPhone,3,4)}}</text>
										<text @tap="goPhone(item.receiverPhone)" class="gui-icons f32">&#xe60c;</text>
									</view>
									<text class="qoverDot3" style="margin-top: 6rpx;">{{item.shippingInfo}}</text>
								</view>
								<!-- <view class="payMoney">
							 	<text>实付款：￥{{$u.priceFixed(item.actualPayment)}}</text>
							 </view> -->
								<view class="bottom">
									<text class="time">{{item.createTime}}</text>
									<view class="btnList">
										<view class="saveBtn submitBtn"
											@tap.stop="$u.to('orderDetail?orderNo='+item.orderNo+'&oIndex='+oIndex)">
											查看详情</view>
										<view class="saveBtn submitBtn" v-if="item.orderStatus===0&&userInfo.role==1"
											@tap="$u.to('orderDetail?orderNo='+item.orderNo+'&oIndex='+oIndex)">扫描标码
										</view>
										<view class="saveBtn submitBtn" v-if="item.orderStatus==1&&userInfo.role==2"
											@tap="$u.to('orderDetail?orderNo='+item.orderNo+'&oIndex='+oIndex)">去分拣
										</view>
										<view class="saveBtn submitBtn" v-if="item.orderStatus==2&&userInfo.role==3"
											@tap="$u.to('orderDetail?orderNo='+item.orderNo+'&oIndex='+oIndex)">完成清洗
										</view>
										<view class="saveBtn submitBtn" v-if="item.orderStatus==3&&userInfo.role==1"
											@tap="$u.to('orderDetail?orderNo='+item.orderNo+'&oIndex='+oIndex)">开始配送
										</view>
										<view class="saveBtn submitBtn" v-if="item.orderStatus==4&&userInfo.role==1"
											@tap="$u.to('orderDetail?orderNo='+item.orderNo+'&oIndex='+oIndex)">完成配送
										</view>
									</view>
								</view>
							</view>
						</view>
						<!-- 加载组件 -->
						<gui-loadmore ref="loadmorecom"></gui-loadmore>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</gui-page>
</template>
<script>
	var graceJs = require('@/GraceUI5/js/grace.js');
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				// 全屏 loading
				pageLoading: true,
				// 选项卡标签
				tabs: [],
				// 选中选项的 索引
				currentIndex: 0,
				// 核心区域高度 
				mainHeight: 200,
				// 订单信息保存数组
				orders: [],
				// 每个选项卡对应的分页
				pages: [],
				pageSize: 10,
				// 每个选项卡内部的滚动区域滚动值
				scrollTops: [],
				// 滚动延迟
				scrollTimer: null,
				// 加载更多延迟
				loadMoreTimer: null,
				// api 加载状态记录
				apiLoadStatus: [],
				noData: [],
				dormitoryList:[{id:0,name:'请选择'}], //宿舍
				dormitoryIndex:0, //宿舍下标
				dormitory:'',
				dormitoryName:'',
				floorList: [{
					id: 0,
					name: '不限'
				}], //楼层
				floorIndex: 0, //楼层下标
				floor:'',
				floorName:'',
				searchKey:''
			}
		},
		onUnload() {
			uni.$off('isAddEvaluate');
			uni.$off('isRefreshClean');
		},
		computed: {
			...mapState(['userInfo'])
		},
		onPullDownRefresh() { //页面下拉
			console.log('refresh');
			this.reload()
			uni.stopPullDownRefresh();
		},
		onLoad: function() {
			uni.$on('isRefresh', (data) => {
				console.log('监听到事件来自 isAddEvaluate ，携带参数 msg 为：' + data.msg);
				this.clearOrderSattus(data.msg)
			})
			uni.$on('isRefreshClean', (data) => {
				console.log('监听到事件来自 isAddEvaluate ，携带参数 msg 为：' + data.msg);
				this.clearOrderSattus2(data.msg)
			})

			// 01. 获取页面主体高度
			graceJs.getRefs('guiPage', this, 0, (ref) => {
				ref.getDomSize('guiPageBody', (e) => {
					// 主体高度 = 页面高度 - 自定义区域高度
					graceJs.select('#myheader', (e2) => {
						// 如果自定义区域有 margin 尺寸获取不到请加上这个值，可以利用 uni.upx2px() 转换
						this.mainHeight = e.height - e2.height;
						// 模拟 api 加载新闻分类
						// 实际开发时此处改成 api 请求即可
						//订单状态 -1已取消 0待支付 1待接单 2已接单 3已出发 4已完成待评价 5已完成 6待处理
						this.tabs = [{
								value: 0,
								name: '待揽收'
							},
							{
								value: 1,
								name: '已揽收'
							}, {
								value: 4,
								name: '待配送'
							}, {
								value: 5,
								name: '已完成'
							}
						];
						// 初始化新闻列表数组 元素数量与分类匹配
						for (var i = 0; i < this.tabs.length; i++) {
							this.orders.push([]);
							this.pages.push(1);
							this.scrollTops.push(0);
							this.apiLoadStatus.push(false);
							this.noData.push(false);
						}
						// 第一次加载数据
						this.getOrders();
						this.getLou()
					});
				});
			});
		},
		onShow() {
			if (uni.getStorageSync('isJump')) {
				this.$nextTick(() => {
					for (var i = 0; i < this.tabs.length; i++) {
						this.pages[i] = 1;
						this.orders[i] = [];
					}
					let orderIndex = uni.getStorageSync('orderIndex')
					this.currentIndex = orderIndex
					uni.setStorageSync('isJump', false)
				})
			}
		},
		watch: {
			currentIndex: function(nVal, oldVal) {
				if (this.orders[nVal] == null) {
					return;
				}
				if (this.orders[nVal].length < 1) {
					this.getOrders();
				}
				if (nVal == 1) {
					this.pages[1] = 1;
					this.orders[1] = [];
					this.getOrders();
				}
			}
		},
		methods: {
			inputting(e) {
				this.searchKey = e
				if (!e) {
					this.clearOrderSattus2()
				}
			},
			handleSearch() {
				this.clearOrderSattus2()
			},
			handleClear() {
				this.searchKey = ''
				this.clearOrderSattus2()
			},
			getArea(parentId){
				return new Promise((resolve, reject) => {
					this.$http.get('/api/areas', {
						parentId
					}).then(res => {
						if (res.data.code == 200) {
							resolve(res.data.data)
						} else {
							reject(res.data.msg)
							this.$u.msg(res.data.msg)
						}
					})
				})
			},
			getLou(){
					this.$http.get('/api/worker/village').then(res => {
						if (res.data.code == 200) {
							let result = res.data.data
							console.log('zzzzzzzzzz',result);
							this.dormitoryList = this.dormitoryList.concat(result)
						} else {
							this.$u.msg(res.data.msg)
						}
					})
			},
			async bindPickerChange(e){
				this.dormitoryIndex = e.detail.value
				this.dormitory =''
				this.dormitoryName =''
				this.floorList = [{id:0,name:'请选择'}]
				this.floorIndex = 0
				this.floor =''
				this.floorName=''
				if(this.dormitoryIndex!=0&&this.dormitoryList.length){
					let obj = this.dormitoryList[this.dormitoryIndex]
					this.dormitory = this.dormitoryIndex==0?'':obj.id
					this.dormitoryName = this.dormitoryIndex==0?'':obj.name
					this.floorList=this.floorList.concat(await this.getArea(obj.id)) 
				}
				this.clearOrderSattus2()
			},
			bindPickerChange3(e) {
				this.floorIndex = e.detail.value
				let obj = this.floorList[this.floorIndex]
				this.floor = this.floorIndex==0?'':obj.id
				this.floorName = this.floorIndex==0?'':obj.name
				this.clearOrderSattus2()
			},
			goPhone(phone) {
				this.$u.showModal('温馨提示', `确认拨打${phone}电话吗？`, (res) => {
					if (res) {
						console.log('用户点击确定');
						this.$u.makePhone(phone)
					}
				})
			},
			cancelOrder(orderNo, oIndex) { //删除订单
				this.$u.showModal('温馨提示', '确认取消该订单吗？', (res) => {
					if (res) {
						this.$http.post('/api/reserveOrder/cancel', {
							orderNo: orderNo
						}).then(res => {
							if (res.data.code == 200) {
								console.log(res.data.data)
								this.$u.msg('已取消')
								this.clearOrderSattus(oIndex)
							} else {
								this.$u.msg(res.data.msg)
							}
						})
					}
				})
			},
			clearOrderSattus(oIndex) { //统一处理订单操作后的情况,原理其余订单重新请求，当前订单删除并且为了全部订单的时候需要重新查询选项卡为0时
				if (this.currentIndex == 0 || this.currentIndex == 1) {
					this.pages[this.currentIndex] = 1;
					this.orders[this.currentIndex] = [];
					this.getOrders()
					for (var i = 0; i < this.tabs.length; i++) {
						if (i != 0) {
							this.pages[i] = 1;
							this.orders[i] = [];
						}
					}
				} else {
					this.orders[this.currentIndex].splice(oIndex, 1);
					this.noData[this.currentIndex] = this.orders[this.currentIndex].length ?
						false : true
					for (var i = 0; i < this.tabs.length; i++) {
						if (i != this.currentIndex) {
							this.pages[i] = 1;
							this.orders[i] = [];
						}
					}
				}
			},
			clearOrderSattus2(oIndex) {
				for (var i = 0; i < this.tabs.length; i++) {
					this.pages[i] = 1;
					this.orders[i] = [];
				}
				this.pages[this.currentIndex] = 1;
				this.orders[this.currentIndex] = [];
				this.getOrders()
			},
			getStatus(status) {
				//退款的流程 -1放弃预约 0待揽收 1清洗中 2清洗完成
				let textStatus = ''
				switch (status) {
					case -1:
						textStatus = '放弃预约'
						break;
					case 0:
						textStatus = '待揽收'
						break;
					case 1:
						textStatus = '已揽收'
						break;
					case 2:
						textStatus = '清洗中'
						break;
					case 3:
						textStatus = '清洗完成'
						break;
					case 4:
						textStatus = '配送中'
						break;
					case 5:
						textStatus = '完成'
						break;
					default:
						break;
				}
				return textStatus;
			},
			// 分类切换
			navchange: function(e) {
				this.currentIndex = e;
			},
			// 轮播切换
			swiperChange: function(e) {
				this.currentIndex = e.detail.current;
			},
			// 滚动区域滚动
			scroll: function(e) {
				if (this.scrollTimer != null) {
					clearTimeout(this.scrollTimer);
				}
				this.scrollTimer = setTimeout(() => {
					this.scrollTops.splice(this.currentIndex, 1, e.detail.scrollTop);
				}, 100);
			},
			// 下拉刷新相关事件绑定
			touchstart: function(e) {
				if (this.apiLoadStatus[this.currentIndex]) {
					return;
				}
				if (this.scrollTops[this.currentIndex] > 0) {
					return;
				}
				this.$refs.refreshcom[this.currentIndex].touchstart(e);
			},
			touchmove: function(e) {
				if (this.apiLoadStatus[this.currentIndex]) {
					return;
				}
				if (this.scrollTops[this.currentIndex] > 0) {
					return;
				}
				this.$refs.refreshcom[this.currentIndex].touchmove(e);
			},
			touchend: function(e) {
				if (this.apiLoadStatus[this.currentIndex]) {
					return;
				}
				if (this.scrollTops[this.currentIndex] > 0) {
					return;
				}
				this.$refs.refreshcom[this.currentIndex].touchend(e);
			},
			// 刷新事件
			reload: function() {
				this.pages[this.currentIndex] = 1;
				this.$refs.loadmorecom[this.currentIndex].stoploadmore();
				this.getOrders(1);
			},
			// 加载更多事件
			loadmorefun: function() {
				var currentIndex = this.currentIndex;
				if (this.apiLoadStatus[currentIndex]) {
					return;
				}
				// 获取加载组件状态看一下是否还能继续加载
				if (this.$refs.loadmorecom[currentIndex].loadMoreStatus != 0) {
					return;
				}
				// 保证触底只执行一次加载
				if (this.loadMoreTimer != null) {
					clearTimeout(this.loadMoreTimer);
				}
				this.loadMoreTimer = setTimeout(() => {
					this.$refs.loadmorecom[currentIndex].loading();
					// 此处开启加载动画执行加载数据的函数
					this.getOrders();
				}, 80);
			},
			// 新闻数据读取
			getOrders: function(isReload) {
				// 使用内部变量记录 当前索引，避免加载时用户切换引起的变量变化
				var currentIndex = this.currentIndex;
				console.log(this.pages[currentIndex]);
				// 更新 api 加载状态
				this.apiLoadStatus.splice(currentIndex, 1, true);
				if (this.pages[currentIndex] == 1 && !isReload) {
					this.pageLoading = true;
				}
				// 当前正在展示的 选项index 为 this.currentIndex
				// 那么分类 value 应该为 this.tabs[this.currentIndex].value

				this.$http.get('/api/worker', {
					searchKey:this.searchKey,
					villageId:this.dormitory,
					floor:this.floor,
					status: this.tabs[currentIndex].value,
					pageNum: this.pages[currentIndex],
					pageSize: this.pageSize
				}).then(res => {
					if (res.data.code == 200) {
						console.log(res.data.data)
						this.total = Math.ceil(res.data.total / this.pageSize);
						// 第一页
						if (this.pages[currentIndex] == 1) {
							this.orders.splice(currentIndex, 1, res.data.data);
							this.noData[currentIndex] = res.data.data.length ? false : true
						}
						// 之后的加载页
						else {
							this.$refs.loadmorecom[currentIndex].stoploadmore();
							console.log(this.pages[currentIndex] >= this.total);
							if (this.pages[currentIndex] > this.total) {
								this.$refs.loadmorecom[currentIndex].nomore();
							} else {
								this.orders[currentIndex] = this.orders[currentIndex].concat(res.data.data);
							}
						}
						if (isReload) {
							this.$refs.refreshcom[currentIndex].endReload();
						}
						this.pages[currentIndex]++;
						// 更新 api 加载状态
						this.apiLoadStatus.splice(currentIndex, 1, false);
						this.pageLoading = false;
						console.log(this.orders);
					} else {
						this.$u.msg(res.data.msg)
					}
				})
			},
		}
	}
</script>
<style lang="less">
	.search{
		padding: 0 30rpx;
		margin-top: 10rpx;
		.item{
			background: #F6F6F6;
			height: 60rpx;
			padding: 0 20rpx;
			margin-bottom: 10rpx;
		}
	}
	.shaixuan {
		width: 130rpx;
		height: 45rpx;
		font-size: 24rpx;
		margin: 0;
		position: relative;
		top: -4rpx;
	}

	.headerTap {
		padding: 15rpx 10rpx 0 10rpx;
		height: 100rpx;
	}

	.order {
		padding: 0rpx 32rpx 0 32rpx;

		.item {
			padding: 32rpx;
			padding-right: 12rpx;
			background: #fff;
			border-radius: 10rpx;
			box-shadow: 0rpx 3rpx 10rpx 2rpx rgba(0, 0, 0, .16);
			margin-top: 20rpx;

			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-right: 20rpx;

				.title {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					color: #666;
				}

				.statusText {
					font-size: 28rpx;
					color: #FF4600;
				}
			}

			.info {
				display: flex;
				justify-content: space-between;
				margin-top: 32rpx;
				border-bottom: 1px dashed #eee;
				padding-bottom: 10rpx;

				.mainImg {
					position: relative;

					image {
						width: 120rpx;
						height: 120rpx;
						border-radius: 10rpx;
					}

					.statusBox {
						position: absolute;
						left: 0;
						top: 0;
						font-size: 21rpx;
						font-weight: 600;
						background: #01A784;
						color: #fff;
						padding: 6rpx 9rpx;
						border-radius: 10rpx 0 20rpx 0;
					}
				}

				.middle {
					flex: 1;
					margin: 0 32rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-around;

					.title {
						font-size: 28rpx;
						font-weight: 700;
						margin-bottom: 10rpx;
					}

					.desc {
						color: #ACACAC;
						font-size: 24rpx;
						margin-bottom: 6rpx;
					}
				}

				.price {
					font-size: 28rpx;
					font-weight: 700;
				}
			}

			.address {
				padding-top: 10rpx;

				.gui-icons {
					color: #FF4600;
				}
			}

			.payMoney {
				display: flex;
				justify-content: flex-end;
				padding: 32rpx 0 20rpx 0;
				font-size: 28rpx;
				font-weight: 700;
				padding-right: 20rpx;
			}

			.bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-right: 20rpx;
				margin-top: 10rpx;

				.time {
					font-size: 24rpx;
					color: #ACACAC;
				}

				.btnList {
					display: flex;
					align-items: center;

					.saveBtn {
						width: 140rpx;
						margin: 0;
						margin-left: 30rpx;
						height: 50rpx;
						font-size: 24rpx;
						background-image: linear-gradient(to bottom, #fff, #fff);
						border: 1px solid #707070;
						color: #707070;
					}

					.cancleBtn {
						border-color: #707070;
						color: #707070;
					}

					.submitBtn {}
				}
			}
		}
	}
</style>